<template>
    <div class="toast" v-show="toastShow" @click="hide">
        {{text}}
    </div>
</template>

<script>
    export default {
        name: "toast",
        data() {
            return {
                toastShow: false,
            }
        },
        props: {
            text: { //文字内容
                type: String,
                default: ''
            },

        },
        components: {},
        mounted() {

        },
        methods: {
            open() {
                this.toastShow = true;
                clearTimeout(this.timeout);
                this.$emit('show')

                    this.timeout = setTimeout(() => {
                        this.hide()
                    }, 1500)

            },
            hide() {
                this.toastShow = false
                this.$emit('hide')
                clearTimeout(this.timeout);
            },

        }
    }
</script>

<style scoped>
    .toast {
        position: fixed;
        z-index: 2000;
        left: 50%;
        top:45%;
        transition:all .5s;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        border-radius: 5px;
        color:#FFF;
        background: rgba(17, 17, 17, 0.7);
        height: 45px;
        line-height: 45px;
        padding: 0 15px;
        max-width: 150px;
    }

</style>
